<script setup>
import order from '@/assets/images/order.png'
import addUser from '@/assets/images/addUser.png'
import money from '@/assets/images/money.png'
import kucun from '@/assets/images/kucun.png'
import Echarts from "@/components/echarts.vue";

let data = [{
  name: '用户',
  type: 'line',
  data: [5, 20, 36, 10, 10, 20]
}]
</script>

<template>
  <div class="index">
    <div class="head">
      <div class="card">
        <div class="img">
          <el-avatar :src="order"></el-avatar>
        </div>
        <div class="text">
          <div class="title">2 单</div>
          <div class="sub-title">成交订单</div>
        </div>
      </div>
      <div class="card">
        <div class="img">
          <el-avatar :src="addUser"></el-avatar>
        </div>
        <div class="text">
          <div class="title">5 人</div>
          <div class="sub-title">用户总数</div>
        </div>
      </div>
      <div class="card">
        <div class="img">
          <el-avatar :src="money"></el-avatar>
        </div>
        <div class="text">
          <div class="title">900 元</div>
          <div class="sub-title">今日金额</div>
        </div>
      </div>
      <div class="card">
        <div class="img">
          <el-avatar :src="kucun"></el-avatar>
        </div>
        <div class="text">
          <div class="title">55</div>
          <div class="sub-title">库存数量</div>
        </div>
      </div>
    </div>
    <div class="body">
      <echarts title="销量趋势" :x-axis="['1-17', '2.18', '1.6', '1.8', '1.8', '11.12']" :series="data"></echarts>
      <echarts title="用户增长趋势" :x-axis="['1.17', '2.18', '1.6', '1.8', '1.8', '11.12']" :series="data"></echarts>
    </div>
  </div>
</template>

<style scoped lang="scss">
 .index{
   padding: 40px;
   .head {
     display: flex;
     justify-content: space-between;
     .card {
       display: flex;
       align-items: center;
       padding-left: 40px;
       box-shadow: var(--el-box-shadow);
       width: 300px;
       height: 100px;
       background-color: var(--theme--primary-color);
       .text{
         margin-left: 20px;
         color: var(--el-text-color);
         width: 100px;
         .title{
           text-align: center;
           font-size: 25px;
         }
         .sub-title{
           text-align: center;
           font-size: 16px;
         }
       }
     }
   }
   .body {
     margin-top: 150px;
     display: flex;
   }
 }
</style>
